<template>
  <div class="seach">
    <div>1212</div>
    <!-- 商品列表 -->
    <van-list>
      <van-card
        :price="item.price"
        :desc="item.message"
        :title="item.name"
        :thumb="item.src[1]"
        :origin-price="item.size"
        @click="godetails(item.good_id)"
        :key="item.good_id"
        v-for="item in list"
      >
        <template #footer>
          <van-icon name="add-o" size="0.2222rem" color="#11b57c" @click.stop="add(item.good_id)" />
        </template>
      </van-card>
      <van-loading v-show="loading" size="24px">加载中...</van-loading>
      <div class="loadbox" v-show="!loading" @click="updata">{{loadmessage?"点击加载更多":"我是有底线的"}}</div>
    </van-list>

    <!-- 回到顶部 -->
    <van-icon v-if="btnFlag" class="go-top" name="upgrade" @click="backTop" />
    <!-- 去购物车 -->
    <van-icon
      name="cart-o"
      class="iconcart"
      :badge="cartnum!=0?cartnum:''"
      size="0.2564rem"
      @click="gocart"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      //列表
      list: []
    };
  },

  components: {
    mounted() {
      window.addEventListener("scroll", this.scrollToTop);
    },
    destroyed() {
      window.removeEventListener("scroll", this.scrollToTop);
    }
  },

  methods: {
    //进入购物车
    gocart() {
      if (this.loginstatus.flag) {
        // 购物车地址
        this.$router.push("/cart");
      } else {
        this.$toast("请登录");
        setTimeout(() => {
          this.$router.push("/login");
        }, 1000);
      }
    },
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop() {
      const that = this;
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed;
        if (that.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    },
    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop() {
      const that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      if (that.scrollTop > 60) {
        that.btnFlag = true;
      } else {
        that.btnFlag = false;
      }
    },
    //添加购物车
    async addcart(good_id) {
      let user_id = getUser();

      try {
        let p = await goodApi.addcart(user_id, 1, good_id);
        if (p.data.flag) {
          //添加成功
          this.$toast.success("添加购物车成功");
        } else {
          //添加失败
          this.$fail("添加购物车失败");
        }
      } catch (error) {
        //添加失败弹窗
        console.log(error);
        this.$toast.fail("网络异常");
      }
    },
    //添加购物车按钮
    add(good_id) {
      if (this.loginstatus.flag) {
        this.addcart(good_id);
      } else {
        if (this.loginstatus.code == 301) {
          this.$toast.fail({
            message: "请登录"
          });
          setTimeout(() => {
            this.$router.push("/login");
          }, 1000);
        } else {
          this.$toast.fail("网络异常");
        }
      }
    },
    //查询当前用户的购物车
    async checkcart() {
      let user_id = getUser();
      try {
        let p = await goodApi.cheackcart(user_id);
        console.log(p);
        if (p.data.flag) {
          this.cartnum = p.data.data.length;
        } else {
          console.log(p.data);
        }
      } catch (error) {
        console.log(error);
      }
    },
    //前往详情
    godetails(good_id) {
      this.$router.push("/details?" + good_id);
    }
  },
  created() {
    this.checkcart();
  }
};
</script>

<style scoped>
.seach {
  width: 100%;
  height: 200px;
  background: skyblue;
}
</style>